<template>
    <!-- 精选存款 -->
    <div class="madp-deposit">
        <div class="header">
            <span>精选存款</span>
            <span></span>
        </div>
        <div class="container">
            <div class="item cursor-pointer" v-for="(item, idx) in list" :key="idx" @click="goDetail(item, idx)">
                <p>{{ item.name }}</p>
                <p>{{ item.rate }}</p>
                <p>年利率</p>
                <p>{{ item.desc }}</p>
            </div>
        </div>
    </div>
</template>
<script>
    import financialApi from '@/api/financial-shop.js';
    export default {
        components: {},
        data() {
            return {
                url: [
                    {
                        type: 31,
                        route: '/financialShop/financial-saving-product',
                        titleName: '幸福通知存'
                    },
                    {
                        type: 32,
                        route: '/financialShop/financial-deposit-taking',
                        titleName: '整存整取'
                    },
                    {
                        type: 33,
                        route: '/financialShop/financial-call-deposit',
                        titleName: '通知存款'
                    },
                    {
                        type: 35,
                        route: '/financialShop/financial-zero-deposit-taking',
                        titleName: '零存整取'
                    },
                    {
                        type: 36,
                        route: '/financialShop/financial-happiness-deposit',
                        titleName: '幸福存单'
                    }
                ],
                list: []
            };
        },
        created() {
            this.initList();
        },
        mounted() {},
        methods: {
            // 初始化存款产品
            initList() {
                financialApi.getDepositProducts().then((res) => {
                    if (res.data.code != 0) return;
                    let arr = res.data.data,
                        map = new Map();
                    this.url.map((i) => {
                        map.set(i.type, i);
                    });
                    this.list = arr.map((i) => {
                        i.route = map.get(i.type).route;
                        i.titleName = map.get(i.type).titleName;
                        return i;
                    });
                });
            },
            goDetail(info, idx) {
                this.$sensorsSend('MktClick', {
                    recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                    $title: '存款产品详情',
                    mkt_type: '',
                    mkt_name: '存款产品详情',
                    mkt_location: idx,
                    mkt_content_name: info.titleName,
                    mkt_content_type: '存款'
                });
                this.$router.push({
                    path: info.route,
                    query: {
                        type: info.type,
                        titleName: info.titleName,
                        radar_type_code: '03',
                        radar_code: info.type,
                        radar_name: info.titleName
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-deposit {
        width: 100%;
        margin-bottom: 16px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0;
            :nth-child(1) {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #2c2c2c;
            }
            :nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(32, 32, 32, 0.8);
            }
        }
        .container {
            width: 100%;
            overflow-x: auto;
            display: flex;
            .item {
                text-align: center;
                padding: 10px 0 14px 0;
                width: 120px;
                height: 126px;
                flex-shrink: 0;
                border: 1px solid rgba(250, 227, 194, 0.8);
                border-radius: 6px;
                margin-right: 5px;
                background: #fff;
                p:nth-child(1) {
                    font-size: 14px;
                    font-weight: 500;
                    color: #2c2c2c;
                }
                p:nth-child(2) {
                    margin-top: 8px;
                    font-size: 16px;
                    font-weight: 500;
                    color: #ed5555;
                }
                p:nth-child(3) {
                    margin-top: 4px;
                    font-size: 12px;
                    color: #2c2c2c;
                }
                p:nth-child(4) {
                    margin-top: 8px;
                    font-size: 13px;
                    color: rgba(44, 44, 44, 0.5);
                }
            }
        }
    }
</style>
